<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
    <meta content=always name=referrer>
    <link rel="stylesheet" type="text/css" href="__STATIC__/css-wap/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="__STATIC__/css-wap/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="__STATIC__/css-wap/style.css">
    <script src="__STATIC__/js-wap/jquery-1.11.3.min.js"></script>
    <script src="__STATIC__/js-wap/swiper.min.js"></script>
    <script src="__STATIC__/js-wap/common.js"></script>
    <title>发现好店</title>
    <script>
        $(function () {
            $(".find-con li").click(
                    function () {
                        $(this).addClass("active").siblings().removeClass("active");
                    }
            )
        })
    </script>
    <style>
        #main{
            width: 100%;
            background: white;
            padding: 1% 3%;
            margin: 5px auto;
        }
        .swiper3{
            padding: 5px 0;
        }
        .swiper3 .slide{
            width: 25%;
            padding: 0 5px;
        }
        .swiper3 .slide img{
            border-radius: 2px;
            width: 100%;
        }
        .layui-flow-more{
            text-align: center;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="header-main">
        <a href="{:url('mobile/user_port/index')}"><img src="__STATIC__/img-wap/back.png" class="back"></a>
        <span class="title" style="font-size: 16px;">发现好店</span>
    </div>
    <div class="find-con">
        <img src="/{$ad.picUrl}" style="width: 100%;display: block;">
        <div class="swiper-container swiper2">
            <ul class="swiper-wrapper">
                <li {if condition="$type eq 'recommend'" } class="swiper-slide text-center active"{else/}class="swiper-slide text-center"{/if}><a href="{:url('mobile/user_action/find_gooder')}?type_id=recommend">全部分类</a></li>
                {volist name='shop_type' id='v'}
                <li {if condition='$type eq $v.id'} class="swiper-slide text-center active"{else/}class="swiper-slide text-center"{/if}><a href="{:url('mobile/user_action/find_gooder')}?type_id={$v.id}">{$v.title}</a></li>
                {/volist}
            </ul>
            <script>
                $(function () {
                    var swiper = new Swiper('.find-con .swiper2', {
                        slidesPerView: 4,
                        spaceBetween: 10,
                        freeMode: true
                    });
                })
            </script>
        </div>
        <div>
            <div id="main">

            </div>
        </div>


    </div>
</div>
{include file="public/src" /}
</body>
<script>
    //layer流加载
    layui.use('flow', function() {
        var $ = layui.jquery;
        var flow = layui.flow;
        flow.load({
            elem: '#main' //流加载容器
            ,isAuto:true
            ,isLazyimg:true
            ,done: function(page, next){ //执行下一页的回调
                var lis = [],
                        id = $('#id').val();
                $.ajax({
                    url:"",
                    dataType:'json',
                    type:'post',
                    data:{'page':page,'id':id},
                    success:function(t){
                        console.log(t);
                        layui.each(t.data, function(index, item) {

                            var src = '';

                            if (item.shopGoods.length > 3) {
                                for (var i = 0; i < item.shopGoods.length; i++) {
                                    if (i == 0) {
                                        src +='<div class="slide"><a href="javascript:jump_goods_details('+item.shopGoods[i].id+');"><img src="/'+item.shopGoods[i].thumb_img+'" style="height: 72px;" onerror=this.src="/static/mobile/img-wap/pic18.png"><div class="title" style="text-align:center;font-size: 12px;line-height: 20px;color: #E73F09;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;margin-top: 5px;">￥'+item.shopGoods[i].price+'</div></a></div>';
                                    } else {
                                        src += '<div class="slide"><a href="javascript:jump_goods_details('+item.shopGoods[i].id+');"><img src="/'+item.shopGoods[i].thumb_img+'" style="height: 72px;" onerror=this.src="/static/mobile/img-wap/pic18.png"><div class="title" style="text-align:center;font-size: 12px;line-height: 20px;color: #E73F09;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;margin-top: 5px;">￥'+item.shopGoods[i].price+'</div></a></div>';
                                    }

                                }

                                var status ="";
                                if (item.status=="") {
                                    var status="";
                                }else {
                                    var status ="自营";
                                }
                                lis.push('<div class="main" style="position: relative;"><a href="javascript:jump_shop(' + item.member_id + ')"><img src="/'+item.banner+'" style="height: 146px;border-radius: 6px;" width="100%;" onerror=this.src="/static/mobile/img/empty_img.png" > <div style="position: absolute;width: 100%;height:100%;background: rgba(0,0,0,0.3);top:0;left:0;display: flex;align-items: center;justify-content: center;">' +
                                        '<span style="position: absolute;top:10px;left:10px;color: white;background: #E73F09;border-radius: 4px;font-size: 12px;line-height: 18px;padding: 0 5px;">'+status+'</span>' +
                                        '<div style="color: white;display: inline-block;border-top:1px solid white;border-bottom: 1px solid white;color: white;letter-spacing: 2px;font-size: 14px;line-height: 20px;color: #fff;padding: 0 5px;">'+item.title+'</div> </div>' +
                                        '</a></div>'+
                                        '<div class="swiper3"><div class="swiper-wrapper">'+src+'</div></div>');
                        }

                        });
                        next(lis.join(''), page < t.pages);
                    }
                })
            }
        });
    });
    //跳转到商品详情
    function jump_goods_details(id){
        sessionStorage.setItem('goods_url_back',window.location.href);
        window.location.href = "{:url('mobile/user_category/goods_details')}?goods_id="+id;
    }
    //跳转到店铺
    function jump_shop(id) {
        var url = "{:url('mobile/user_category/shop_index')}?shop_id="+id;
        sessionStorage.setItem('shop_back_url',window.location.href);
        window.location.href = url;
    }



</script>
</html>